<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>UI2示例</title>
    <script src="/static/trunk/js/boot.js" type="text/javascript"></script>
    <style type="text/css">
        /*Tab页签图标-未选中状态*/
        .icon-tab-test{
            background:url("/trunk/img/demo/UITest/tubiao_2.png") no-repeat;
            background-size: 100% 100%;
        }
        /*Tab页签图标-选中状态*/
        .mini-tab-active .icon-tab-test{
            background:url("/trunk/img/demo/UITest/tubiao_1.png") no-repeat;
            background-size: 100% 100%;
        }
        /*表格无数据样式*/
        #datagrid .mini-grid-emptyText{
            height:350px;
        }
        #list1 .mini-grid-emptyText{
            height:226px;
        }
        #list2 .mini-grid-emptyText{
            height:226px;
        }
    </style>
</head>
<body>
<h1>样式</h1>
<div class="queryForm">
    <div class="bt bt_blue" onclick="changeStyle(2)">样式二(新UI规范)</div>
    <div class="bt bt_gray" onclick="changeStyle(1)">样式一</div>
</div>
<span class="note">新UI规范仍兼容旧版UI规范样式。</span>
<hr>
<h1>1.变更日志</h1>
<ul>
    <li>1）菜单样式变更（顶部菜单），菜单超过7个则显示前6个（最多支持3级菜单），剩下的放入更多（更多中的菜单最多只支持2级），用户栏嵌入修改密码、退出登录功能。</li>
    <li>2）表格样式变更、表格操作栏按钮样式变更（新增样式bt_grid_default，bt_grid_default_last，bt_grid_default_disable）、新增状态栏样式（bt_grid_state）</li>
    <li>3）新增按钮样式bt_blue、bt_gray,弹框按钮样式wbt_blue、wbt_gray</li>
    <li>4）输入框边框样式、disable样式变更、提示文字样式变更，下拉框样式变更</li>
    <li>5）弹框样式变更</li>
    <li>6）各控件选中样式变更</li>
    <li>7）tab页签样式变更</li>
    <li>8）大弹窗</li>
    <li>9）消息提示框样式变更</li>
    <li>10）暂无数据样式变更</li>
    <li>11）404页面</li>
    <li>12）上传控件按钮样式变更</li>
    <li>13）新增文件格式图片</li>
    <li>14）树样式变更</li>
</ul>
<h1>2.操作状态按钮</h1>
<div class="queryForm">
    <div class="bt bt_blue" onclick="">查询</div>
    <div class="bt bt_blue_active" onclick="">查询</div><!-- 选中状态样式 -->
    <div class="bt bt_blue_disable" onclick="">查询</div><!-- 不可用状态样式 -->
    <div class="bt bt_gray" onclick="">关闭</div>
    <div class="bt bt_gray_active" onclick="">关闭</div><!-- 选中状态样式 -->
    <div class="bt bt_gray_disable" onclick="">关闭</div><!-- 不可用状态样式 -->
</div>
<div class="queryForm">
    <div class="bt bt_add" onclick="">新增</div>
    <div class="bt bt_search" onclick="">查询</div>
    <div class="bt bt_edit" onclick="">编辑</div>
    <div class="bt bt_delete" onclick="">删除</div>
    <div class="bt bt_export" onclick="">导出</div>
    <div class="bt bt_import" onclick="">导入</div>
    <div class="bt bt_save" onclick="">保存</div>
    <div class="bt bt_cancel" onclick="">取消</div>
    <div class="bt bt_download" onclick="">下载</div>
    <div class="bt bt_upload" onclick="">上传</div>
    <div class="bt bt_publish" onclick="">发布</div>
    <div class="bt bt_position" onclick="">查找坐标</div>
    <div class="bt bt_moresearch" onclick="moreSearch(this)">更多查询</div>
</div>
<div class="queryForm">
    <div class="bt bt_refresh" onclick="">更新</div>
    <div class="bt bt_use" onclick="">启用</div>
    <div class="bt bt_unuse" onclick="">停用</div>
    <div class="bt bt_apply" onclick="">申报</div>
    <div class="bt bt_audit" onclick="">审核</div>
    <div class="bt bt_supervise" onclick="">督办</div>
    <div class="bt bt_play" onclick="">播放</div>
    <div class="bt bt_stop" onclick="">停止</div>
    <div class="bt bt_batch_audit" onclick="">批量审核</div>
    <div class="bt bt_batch_audit_yes" onclick="">批量通过</div>
    <div class="bt bt_batch_audit_no" onclick="">批量不通过</div>
    <div class="bt bt_data_edit" onclick="">修约补遗</div>

</div>
<div class="queryForm">
    <div class="bt bt_back" onclick="">返回</div>
    <div class="bt bt_reset" onclick="">重置</div>
    <div class="bt bt_batch_refresh" onclick="">批量恢复</div>
    <div class="bt bt_batch_delete" onclick="">批量删除</div>
    <div class="bt bt_clear" onclick="">清空回收站</div>
    <div class="bt bt_submit" onclick="">提交</div>
    <div class="bt bt_assign" onclick="">下发</div>
    <div class="bt bt_choice" onclick="">选择执法对象</div>
    <div class="bt bt_tmp_save" onclick="">暂存</div>
    <div class="bt bt_record" onclick="">登记</div>
</div>
<span class="note">弹框底部操作按钮。表单编辑保存时，为“保存”和“取消”。表单查看时，为“关闭”。弹出列表、树等非直接保存的深层子窗口，为“确定”和“取消”。</span>
<div class="queryForm">
    <div class="bt wbt wbt_blue" onclick="">查询</div>
    <div class="bt wbt wbt_blue_active" onclick="">查询</div><!-- 选中状态样式 -->
    <div class="bt wbt wbt_gray" onclick="">关闭</div>
    <div class="bt wbt wbt_gray_active" onclick="">关闭</div><!-- 选中状态样式 -->
    <div class="bt wbt wbt_disable" onclick="">不可用</div><!-- 不可用状态样式 -->
</div>
<div class="queryForm">
    <div class="bt wbt wbt_ok" onclick="">确定</div>
    <div class="bt wbt wbt_cancel" onclick="">取消</div>
    <div class="bt wbt wbt_save" onclick="">保存</div>
    <div class="bt wbt wbt_apply" onclick="">申报</div>
    <div class="bt wbt wbt_publish" onclick="">发布</div>
    <div class="bt wbt wbt_reset" onclick="">重置</div>
    <div class="bt wbt wbt_tmp_save" onclick="">暂存</div>
    <div class="bt wbt wbt_submit" onclick="">提交</div>
    <div class="bt wbt wbt_save_publish" onclick="">保存并发布</div>
    <div class="bt wbt wbt_go" onclick="">去填写</div>
</div>
<span class="note">wbt 和 bt_xxx样式可搭配混合使用</span>
<div class="bt wbt bt_search" onclick="">查看</div>
<hr>

<h1>3.查询列表</h1>
<div id="queryForm" class="queryForm">
    <!--说明queryForm内的span为inline-block，不会因为换行而强行拆开。 -->
    <span>查询条件：<input name="" class="mini-textbox" required="true" emptyText="请输入" value="1"/></span>
    <span>开始时间：<input id="query_bgTime" name="" class="mini-datepicker" format="yyyy-MM-dd HH:mm:ss" timeFormat="HH:mm:ss" showTime="true"
                      showOkButton="true" showClearButton="true" required="true" width="168px" onvalidation="onDateTimeValidation"/>
		</span>
    -
    <span>结束时间：<input id="query_endTime" name="" class="mini-datepicker" format="yyyy-MM-dd HH:mm:ss" timeFormat="HH:mm:ss" showTime="true"
                      showOkButton="true" showClearButton="true" required="true" width="168px" onvalidation="onDateTimeValidation"/></span>
    <span>月份：<input class="mini-monthpicker" value="new Date()" width="148px"/></span>
    <span>日期：<input id="query_date" name="" class="mini-datepicker" showOkButton="true" showClearButton="true" required="true" width="148px"/>	</span>
    <span>下拉选项：<input name="" class="mini-combobox" data="[{id:1,text:'选项一'},{id:2,text:'选项二'},{id:3,text:'选项三'}]" url=""
                      valueFromSelect="true" showNullItem="true" nullItemText="全部" emptyText="请选择"  allowInput="true"/>
		</span>
    <span>复选框组：<div name="" class="mini-checkboxlist" data="[{id:1,text:'选项四'},{id:2,text:'选项五'},{id:3,text:'选项六'}]" url=""
                    style="display: inline-block;vertical-align: middle;" repeatLayout="table"></div><!-- 复选框组样式在页面单独定义，不在UI.css中定义，因为复选框组可以通过属性设置改变样式。此处定义为inline-block，不会强制换行显示。 -->
   		</span>
    <div class="bt bt_search" onclick="query()">查询</div>
    <div class="bt bt_add" onclick="">新增</div>
    <div id="bt_lock_column" class="bt bt_use" onclick="lockColumn()">锁定列</div>
    <div id="bt_unlock_column"  class="bt bt_unuse" onclick="unlockColumn()" style="display: none;">取消锁定列</div>
    <div id="bt_warp_cell"  class="bt bt_use" onclick="warpCell()">换行</div>
    <div id="bt_nowarp_cell"  class="bt bt_unuse" onclick="noWarpCell()" style="display: none;">不换行</div>
</div>
<!-- <div class="mini-fit"> -->
<div class="queryForm">
    <span class="note">（说明：如果表格高度过高或过低，表格无数据样式需要自行调整.mini-grid-emptyText，大部分情况下不需要自行定义。此自定义样式在当前页面定义，不要在公共css文件中定义！）</span>
</div>
<div id="datagrid" class="mini-datagrid" url="${ctx}/demo/jpa/getAll.do" style="width:100%;height:800px;"
     showEmptyText="true" emptyText="暂无数据" multiSelect="true" ><!-- allowHeaderWrap="true" 表头自动换行-->
    <div property="columns">
        <div type="checkcolumn"  width="40" ></div>
        <div type="indexcolumn" width="50" headerAlign="center" align="center" >序号</div>
        <div field="testName" width="120" headerAlign="center" align="center" allowSort="true">字段一</div>
        <div field="testLevel" width="120" headerAlign="center" align="center" allowSort="true" >字段二</div>
        <div header="字段三" headerAlign="center" align="center" >
            <div property="columns">
                <div name="field3" field="field3" width="120" headerAlign="center" align="center">字段三.1</div>
                <div field="field4" width="100" headerAlign="center" align="center">字段三.2</div>
            </div>
        </div>
        <div field="field5" width="120" headerAlign="center" align="center">字段四</div>
        <div field="field6" width="120" headerAlign="center" align="center">字段五</div>
        <div field="field7" width="120" headerAlign="center" align="center">字段六</div>
        <div field="field8" width="120" headerAlign="center" align="center">字段七</div>
        <div field="field9" width="120" headerAlign="center" align="center">字段八</div>
        <div field="field10" width="120" headerAlign="center" align="center">字段九</div>
        <div field="field11" width="120" headerAlign="center" align="center">字段十</div>
        <div field="field12" width="120" headerAlign="center" align="center">字段十一</div>

        <div field="op" width="160" headerAlign="center" align="center">操作</div>
    </div>
</div>
<!--  </div> -->
<hr>

<h1>4.弹框</h1>
<div class="queryForm">
    <span class="note">（说明：大部分情况下，建议不要设置弹框或面板panel的高度，让其自适应，防止出现不必要的空白。如果弹框内容过多，需要滚动条时，则必须指定弹框高度。在任何时候都必须指定弹框宽度。）</span>
</div>
<div class="bt bt_add" onclick="openWin()">小弹框</div>
<div class="bt bt_add" onclick="openWin2()">大弹框</div>
<!-- 默认窗口内边距为30px，窗口内table宽高均为100%。行间距为5px。输入框默认长度202px，可重设。-->
<div id="win" class="mini-window" title="" style="width:700px;" showFooter="true" showMaxButton="false" showCollapseButton="false"> <!-- height:390px; -->
    <div id="winDataForm">
        <table>
            <tr>
                <td colspan="4" align="left"><span class="note">（说明：{此处为提示信息……}）</span></td>
            </tr>
            <tr>
                <td width="100"><font color="#ff5a00">*</font>文本框:</td>
                <td><input name="" class="mini-textbox" required="true" emptyText="请输入"/></td>
                <td width="100">数字框:</td>
                <td> <input name="" class="mini-spinner" minValue="0" maxValue="100"/></td>
            </tr>
            <tr>
                <td>复选框:</td>
                <td><input name="" class="mini-checkbox" text="是否启用"/></td>
                <td>复选框组:</td>
                <td><div name="" class="mini-checkboxlist" data="[{id:1,text:'选项1'},{id:2,text:'选项2'},{id:3,text:'选项3'}]" url=""
                         style="display: inline-block;vertical-align: middle;" repeatLayout="flow"></div></td>
            </tr>
            <tr>
                <td>单选框组:</td>
                <td><div name="" class="mini-radiobuttonlist" data="[{id:1,text:'选项1'},{id:2,text:'选项2'},{id:3,text:'选项3'}]" url=""
                         style="display: inline-block;vertical-align: middle;" repeatLayout="table"></div></td>
                <td>下拉框:</td>
                <td><div name="" class="mini-combobox" data="[{id:1,text:'选项1'},{id:2,text:'选项2'},{id:3,text:'选项3'}]" url="" emptyText="请选择"></div></td>
            </tr>
            <tr>
                <td>日期:</td>
                <td>
                    <input name="" class="mini-datepicker" format="yyyy-MM-dd" showTime="false" showOkButton="true" showClearButton="true" value="new Date()"/>
                </td>
                <td>时间:</td>
                <td>
                    <input name="" class="mini-datepicker" format="yyyy-MM-dd HH:mm:ss" timeFormat="HH:mm:ss"
                           showTime="true" showOkButton="true" showClearButton="true" value="new Date()"/>
                </td>
            </tr>
            <tr>
                <td>多行文本框:</td>
                <td colspan="3"><textarea name="testText" class="mini-textarea" height="66px" width="526px" emptyText="请输入"></textarea></td>
            </tr>
        </table>
    </div>
    <div property="footer">
        <div class="bt wbt wbt_gray" onclick="mini.get('win').hide()">取消</div>
        <div class="bt wbt wbt_blue" onclick="saveWin()">提交</div>
    </div>
</div>

<div id="win2" class="mini-window" title="" style="width:100%;height: 100%;"bodyStyle="padding:0" showHeader="false" showFooter="false" showMaxButton="false" showCollapseButton="false"> <!-- height:390px; -->
    <div class="win-max-closed" onclick="mini.get('win2').hide()"></div>
    <div class="mini-tabs" activeIndex="0" style="width:100%;height:100%;" plain="false">
        <div title="移动执法" >
            <div class="mini-datagrid" url="" style="width:100%;height:100%;" showEmptyText="true" emptyText="暂无数据" multiSelect="true" ><!-- allowHeaderWrap="true" 表头自动换行-->
                <div property="columns">
                    <div type="indexcolumn" width="50" headerAlign="center" align="center" >序号</div>
                    <div field="" width="160" headerAlign="center" align="center">企业名称</div>
                    <div field="" width="120" headerAlign="center" align="center">检查开始时间</div>
                    <div field="" width="120" headerAlign="center" align="center">检查结束时间</div>
                    <div field="" width="100" headerAlign="center" align="center">任务类型</div>
                    <div field="" width="120" headerAlign="center" align="center">执法人员（执法证号）</div>
                    <div field="" width="100" headerAlign="center" align="center">检查部门</div>
                    <div field="" width="180" headerAlign="center" align="center">环境违法情况</div>
                    <div field="op" width="120" headerAlign="center" align="center">操作</div>
                </div>
            </div>
        </div>
        <div title="子页面2">
            子页面2
        </div>
    </div>
</div>

<hr>


<h1>5.非弹框表单</h1>
<div class="queryForm">
    <span class="note">（说明：非弹框内的form表单，必须在面板panel内。）</span>
</div>
<div class="queryForm">
    <div id="bt_edit" class="bt bt_edit" onclick="edit()">编辑</div>
    <div id="bt_delete" class="bt bt_delete" onclick="remove()">删除</div>
    <div id="bt_save" class="bt bt_save" onclick="save()" style="display: none;">保存</div>
    <div id="bt_cancel" class="bt bt_cancel" onclick="cancel()" style="display: none;">取消</div>
</div>
<div class="mini-panel" title="" iconCls="icon-add" style="width:724px;"
     showToolbar="false" showCloseButton="false" showFooter="false" showHeader="false"><!-- height:350px; -->
    <div id="dataForm">
        <table>
            <tr>
                <td colspan="4" style="text-align: left;"><span class="note">（说明：readOnly由LabelModel（查看模式）/InputModel（编辑模式）控制，一般无需在控件上声明；enabled需要在控件上声明，用于控制输入框不能手动输入，注意区分！）</span></td>
            </tr>
            <tr>
                <td width="100"><font color="#ff5a00">*</font>文本框:</td>
                <td><input name="" class="mini-textbox" required="true" value="此处不可编辑" enabled="false"/></td>
                <td width="100">数字框:</td>
                <td> <input name="" class="mini-spinner" minValue="0" maxValue="100" /></td>
            </tr>
            <tr>
                <td>复选框:</td>
                <td><input name="" class="mini-checkbox" text="是否启用" value="true"/></td>
                <td>复选框组:</td>
                <td><div name="" class="mini-checkboxlist" data="[{id:1,text:'选项1'},{id:2,text:'选项2'},{id:3,text:'选项3'}]" url=""
                         style="display: inline-block;vertical-align: middle;" repeatLayout="table" value="1"></div></td>
            </tr>
            <tr>
                <td>单选框组:</td>
                <td><div name="" class="mini-radiobuttonlist" data="[{id:1,text:'选项1'},{id:2,text:'选项2'},{id:3,text:'选项3'}]" url=""
                         style="display: inline-block;vertical-align: middle;" repeatLayout="table"></div></td>
                <td>下拉框:</td>
                <td><div name="combobox1" class="mini-combobox" data="[{id:1,text:'选项1'},{id:2,text:'选项2'},{id:3,text:'选项3'}]" multiSelect="true" url=""></div></td>
            </tr>
            <tr>
                <td>日期:</td>
                <td>
                    <input name="" class="mini-datepicker" format="yyyy-MM-dd" showTime="false" showOkButton="true" showClearButton="true" value="new Date()"/>
                </td>
                <td>时间:</td>
                <td>
                    <input name="" class="mini-datepicker" format="yyyy-MM-dd HH:mm:ss" timeFormat="HH:mm:ss"
                           showTime="true" showOkButton="true" showClearButton="true" value="new Date()"/>
                </td>
            </tr>
            <tr>
                <td>多行文本框:</td>
                <td colspan="3"><textarea name="" class="mini-textarea" height="66px" width="529px"></textarea></td>
            </tr>
        </table>
    </div>
</div>
<hr>

<h1>6.提示框</h1>
<span class="note">（说明：下列按钮样式与弹框并无绝对关系，仅供参考。弹框大小固定，提示信息会自动换行，但不宜太长，如太长请使用mini.window等其他形式。提示信息内容会自动换行！超出内容“…”显示。传title参数时有标题栏，不传无标题栏。）</span>
<div class="queryForm">
    <div class="bt bt_delete" onclick="showConfirmDeleteTest()">删除</div>
    <!--  提示框showAlert(message,iconCls)。
         参数：message-提示内容，
                 iconCls-图标样式（question-问号，warn-警告，success-操作成功，error-错误，info-描述，select-选中，download-下载
               title-提示标题，可不传。不传、为空或null时，无标题栏。
                 ） -->
    <div class="bt bt_add" onclick="showAlert('企业名称不能重复！','warn','')">警告</div>
    <div class="bt bt_save" onclick="showAlert('保存成功（建议使用渐隐成功提示）！','success','')">成功</div>
    <div class="bt bt_apply" onclick="showAlert('操作失败！','error','')">失败</div>
    <div class="bt bt_search" onclick="showAlert('那个人好像一条狗。','info','')">描述</div>
    <div class="bt bt_edit" onclick="showAlert('请先选中一条记录！','select','提示')">选中</div>
    <div class="bt bt_download" onclick="showConfirmDownloadTest()">下载</div>
    <div class="bt bt_edit" onclick="showInputTest()">输入框</div>
    <div class="bt bt_edit" onclick="showAlert('提示信息很长，</br>可强制自动换行！','warn','')">内容换行提示</div>
</div>

<span class="note">（说明：表单操作成功提示，建议使用渐隐。操作失败等其他提示建议使用上面的提示框。）</span>
<div class="queryForm">
    <!-- 提示框(渐隐)showAlertAutoHide(message,iconCls,delay)
    message-提示内容，
    iconCls-图标样式（question-问号，warn-警告，success-操作成功，error-错误，info-描述，select-选中，download-下载）
     delay-渐隐消失时长（毫秒），默认2000毫秒-->
    <div class="bt bt_save" onclick="showAlertAutoHide('恭喜您，保存成功！','success')">渐隐(成功)</div>

    <div class="bt bt_refresh" onclick="showSuccessTip('保存成功！')">mini渐隐（成功）</div>
    <div class="bt bt_refresh" onclick="showFailTip('操作失败！')">mini渐隐（失败）</div>
    <div class="bt bt_refresh" onclick="showInfoTip('我是谁，我在哪里，我在干什么？')">mini渐隐（描述）</div>
</div>

<span class="note">（说明：form表单和datagrid应使用其自带的loading()和unmask()方法。）</span>
<div class="queryForm">
    <div class="bt bt_upload" onclick="showLoadingTest()">加载框（小）</div>
    <div class="bt bt_publish" onclick="showWaitingTest()">等待框（大）</div>
</div>
<hr>


<h1>7.列表框左移右移</h1>
<span class="note">（说明：用datagrid代替listbox可以提供更好的样式和更丰富的功能！）</span>
<div class="mini-panel" title="" iconCls="icon-add" style="width:1200px;"
     showToolbar="false" showCloseButton="false" showFooter="true" showHeader="false"><!-- height:536px; -->
    <table>
        <tr>
            <td style="text-align:left;">
                <div class="queryForm">
                    <span>查询条件：</span><input name="" class="mini-textbox" width="150" emptyText="请输入"/>
                    <div class="bt bt_search" onclick="queryLeftList()">查询</div>
                </div>
            </td>
            <td></td>
            <td style="text-align:left;">
                已选数量：<span style="color:#ff0000;" id="rightCounts"></span>
            </td>
        </tr>
        <tr>
            <td>
                <div id="list1" class="mini-datagrid" url="${ctx}/demo/jpa/getAll.do" style="width:480px;height:400px;"
                     showEmptyText="true" emptyText="暂无数据" multiSelect="true" showPager="false">
                    <div property="columns">
                        <div type="checkcolumn" width="20"></div>
                        <div field="field1" width="100" headerAlign="center" align="center">字段1</div>
                    </div>
                </div>
            </td>
            <td style="width:180px;text-align:center;">
                <div id="bt_add_list" class="bt_move_right" onclick="addList()"></div>
                <div id="bt_remove_list" class="bt_move_left" onclick="removeList()"></div>
            </td>
            <td style="text-align:left;">
                <div id="list2" class="mini-datagrid" url="${ctx}/demo/jpa/getAll.do" style="width:480px;height:400px;"
                     showEmptyText="true" emptyText="暂无数据" multiSelect="true" showPager="false">
                    <div property="columns">
                        <div type="checkcolumn" width="20"></div>
                        <div field="field1" width="100" headerAlign="center" align="center">字段1</div>
                    </div>
                </div>
            </td>
        </tr>

    </table>
    <div property="footer">
        <div class="bt wbt wbt_save" onclick="saveLeftList()">保存</div>
        <div class="bt wbt wbt_cancel" onclick="">取消</div>
    </div>
</div>
</br>
<!-- 树结构左移右移 -->
<div class="mini-panel" style="width:1200px;" showToolbar="false" showCloseButton="false" showFooter="true" showHeader="false"><!-- height:536px; -->
    <table>
        <tr>
            <td style="text-align:left;">
                <div class="queryForm">
                    <span>查询条件：</span><input name="" class="mini-textbox" width="150" emptyText="请输入"/>
                    <div class="bt bt_search" onclick="queryLeftTreeGrid()">查询</div>
                </div>
            </td>
            <td></td>
            <td style="text-align:left;">
                已选数量：<span style="color:#ff0000;" id="rightTreeCounts"></span>
            </td>
        </tr>
        <tr>
            <td>
                <div id="treegrid1" class="mini-treegrid" style="width:480px;height:390px;" 	treeColumn="field1" idField="id" parentField="pid" ondrawcell="drawcell"
                     showTreeIcon="false" expandOnLoad="true" checkOnTextClick="true" resultAsTree="false" multiSelect="true" showCheckBox="true">
                    <div property="columns">
                        <div field="field1" name="field1" width="100" headerAlign="center" align="center">字段1</div>
                    </div>
                </div>
            </td>
            <td style="width:180px;text-align:center;">
                <div id="bt_add_treelist" class="bt_move_right" onclick="addTreeGrid()"></div>
                <div id="bt_remove_treelist" class="bt_move_left" onclick="removeTreeGrid()"></div>
            </td>
            <td style="text-align:left;">
                <div id="treegrid2" class="mini-treegrid" style="width:480px;height:390px;"  treeColumn="field1" idField="id" parentField="pid"
                     showTreeIcon="false" expandOnLoad="true" checkOnTextClick="true" resultAsTree="false" multiSelect="true" showCheckBox="true">
                    <div property="columns">
                        <div field="field1" name="field1" width="100" headerAlign="center" align="center">字段1</div>
                    </div>
                </div>
            </td>
        </tr>

    </table>
    <div property="footer">
        <div class="bt wbt wbt_save" onclick="saveLeftTreeList()">保存</div>
        <div class="bt wbt wbt_cancel" onclick="">取消</div>
    </div>
</div>
<hr>


<h1>8.树</h1>
<div class="mini-panel" title="" iconCls="icon-add" style="width:700px;"
     showToolbar="false" showCloseButton="false" showFooter="false" showHeader="false"><!-- height:600px; -->
    <table>
        <tr>
            <td valign="top">
                <ul id="tree1" class="mini-tree" url="" style="width:300px;height:440px;" showTreeIcon="false" expandOnLoad="true"
                    expandOnNodeClick="true" resultAsTree="false" showCheckBox="false" checkOnTextClick="true" ondrawnode="onTreeDrawNode"></ul>
            </td>
            <td valign="top">
                <ul id="tree2" class="mini-tree" url="" style="width:300px;height:440px;" showTreeIcon="false" expandOnLoad="true"
                    expandOnNodeClick="true" resultAsTree="false" showCheckBox="true" checkOnTextClick="true" ondrawnode="onTreeDrawNode"></ul>
            </td>
        </tr>
    </table>
</div>
<hr>

<h1>9.暂无信息图片</h1>
<div class="queryForm">
    <span class="note">（说明：datagrid和上传控件已内置暂无信息图片，无需特殊处理。datagrid需要设置emptyText相关属性。）</span>
</div>
<div style="display: table;">
    <div style="position: relative;height:200px;">
        <!-- 为了方便样式切换及模块化开发，不要直接引用图片地址，而应引用css样式！ -->
        <!-- 为了演示，加了float:left样式，实际开发中不需要-->
        <div class="no-info" style="float:left"></div>
        <div class="no-data" style="float:left"><span class="no-data-title">暂无文件</span></div>
        <div class="bar-no-data" style="float:left"></div>
        <div class="pie-no-data" style="float:left"></div>
        <div class="img-no-data" style="float:left"></div>
        <div class="query-no-data" style="float:left"></div>
        <div class="warn-no-data" style="float:left"></div>
        <div class="no-user" style="float:left"><span class="no-data-title">暂未分派人员</span></div>
        <div class="no-company" style="float:left"><span class="no-data-title">暂未选择企业</span></div>
    </div>
</div>

<hr>

<h1>10.页面内页签切换</h1>
<div class="queryForm">
    <span class="note">（说明：Tab图标声明iconCls(icon-tab-xxx)，引用的css样式在当前页面定义，不要在公共css中定义。一个图标对应2个css样式，分别为： 未选中样式.icon-tab-xxx 和 选中样式 .mini-tab-active .icon-tab-xxx）</span>
</div>
<table>
    <tr>
        <td>横向页签</td>
        <td>纵向页签</td>
    </tr>
    <tr>
        <td>
            <div class="mini-tabs" activeIndex="0" style="width:350px;height:200px;" plain="false">
                <div title="子页面1" iconCls="icon-tab-test">
                    子页面1
                </div>
                <div title="子页面2">
                    子页面2
                </div>
            </div>
        </td>
        <td>
            <div class="mini-tabs" activeIndex="0" style="width:350px;height:200px;" plain="false" tabPosition="left">
                <div title="子页面1" >
                    子页面1
                </div>
                <div title="子页面2">
                    子页面2
                </div>
            </div>
        </td>
    </tr>
</table>

<h1>11.弹出表格</h1>
<input id="buttonedit_grid" class="mini-buttonedit" onbuttonclick="onButtonEditGrid" emptyText="请选择"/>
<div id="win_buttonedit_grid" class="mini-window" title="选择列表" style="width:704px;" showFooter="true" showMaxButton="false" showCollapseButton="false"><!-- height:610px; -->
    <div id="datagrid_buttonedit" class="mini-datagrid" style="width:100%;height:440px;"  showEmptyText="true" emptyText="暂无数据" multiSelect="true" >
        <div property="columns">
            <div type="indexcolumn" width="20" headerAlign="center" align="center" >序号</div>
            <div field="field1" width="120" headerAlign="center" align="center" allowSort="true">字段一</div>
            <div field="field2" width="120" headerAlign="center" align="center" allowSort="true">字段二</div>
        </div>
    </div>
    <div property="footer">
        <div class="bt wbt wbt_ok" onclick="selectGrid()">确定</div>
        <div class="bt wbt wbt_cancel" onclick="mini.get('win_buttonedit_grid').hide()">取消</div>
    </div>
</div>
<hr>

<h1>12.弹出树</h1>
<input id="buttonedit_tree" class="mini-buttonedit" onbuttonclick="onButtonEditTree" emptyText="请选择"/>
<div id="win_buttonedit_tree" class="mini-window" title="选择树" style="width:704px;" showFooter="true" showMaxButton="false" showCollapseButton="false"><!-- height:610px; -->
    <ul id="tree_buttonedit" class="mini-tree" url="" style="width:300px;height:440px;" showTreeIcon="false" expandOnLoad="true"
        expandOnNodeClick="true" resultAsTree="false" showCheckBox="true" checkOnTextClick="true" ondrawnode="onTreeDrawNode"></ul>
    <div property="footer">
        <div class="bt wbt wbt_ok" onclick="selectTree()">确定</div>
        <div class="bt wbt wbt_cancel" onclick="mini.get('win_buttonedit_tree').hide()">取消</div>
    </div>
</div>
<hr>

<h1>13.系统统一颜色类别</h1>
<div class="mini-panel" title="水质" style="width:520px;" showToolbar="false" showCloseButton="false" showFooter="false" showHeader="true">
    <table>
        <tr>
            <td>Ⅰ类（优）</td>
            <td>蓝色</td>
            <td width="100"><div style="width:100px;height:20px;background: #3c95ff"></div></td>
            <td width="100">#3C95FF</td>
        </tr>
        <tr>
            <td>Ⅱ类（良）</td>
            <td>蓝色</td>
            <td><div style="width:100px;height:20px;background: #3c95ff"></div></td>
            <td>#3C95FF</td>
        </tr>
        <tr>
            <td>Ⅲ类（轻度）</td>
            <td>绿色</td>
            <td><div style="width:100px;height:20px;background: #09be09"></div></td>
            <td>#09BE09</td>
        </tr>
        <tr>
            <td>四类（中度）</td>
            <td>黄色</td>
            <td><div style="width:100px;height:20px;background: #ffe400"></div></td>
            <td>#FFE400</td>
        </tr>
        <tr>
            <td>五类（重度）</td>
            <td>橘红</td>
            <td><div style="width:100px;height:20px;background: #fe701b"></div></td>
            <td>#FE701B</td>
        </tr>
        <tr>
            <td>劣五（严重）</td>
            <td>红色</td>
            <td><div style="width:100px;height:20px;background: #ff0000"></div></td>
            <td>#FF0000</td>
        </tr>
    </table>
</div>
<div class="mini-panel" title="在线状态" style="width:520px;" showToolbar="false" showCloseButton="false" showFooter="false" showHeader="true">
    <table>
        <tr>
            <td>正常</td>
            <td></td>
            <td width="100"><div style="width:100px;height:20px;background: #0ac136"></div></td>
            <td width="100">#0AC136</td>
        </tr>
        <tr>
            <td>异常</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #cb83e2"></div></td>
            <td>#CB83E2</td>
        </tr>
        <tr>
            <td>预警</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #f26896"></div></td>
            <td>#F26896</td>
        </tr>
        <tr>
            <td>超标</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #e95959"></div></td>
            <td>#E95959</td>
        </tr>
        <tr>
            <td>故障</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #e99324"></div></td>
            <td>#E99324</td>
        </tr>
        <tr>
            <td>离线</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #8f8f8f"></div></td>
            <td>#8F8F8F</td>
        </tr>
        <tr>
            <td>部分离线</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #8ab8c8"></div></td>
            <td>#8AB8C8</td>
        </tr>
        <tr>
            <td>停运</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #675939"></div></td>
            <td>#675939</td>
        </tr>
    </table>
</div>
<div class="mini-panel" title="安监企业风险等级" style="width:520px;" showToolbar="false" showCloseButton="false" showFooter="false" showHeader="true">
    <table>
        <tr>
            <td>蓝</td>
            <td></td>
            <td width="100"><div style="width:100px;height:20px;background: #1f71eb"></div></td>
            <td width="100">#1F71EB</td>
        </tr>
        <tr>
            <td>黄</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #cfe53c"></div></td>
            <td>#CFE53C</td>
        </tr>
        <tr>
            <td>橙</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #ff921e"></div></td>
            <td>#FF921E</td>
        </tr>
        <tr>
            <td>红</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #ff2727"></div></td>
            <td>#FF2727</td>
        </tr>
    </table>
</div>
<div class="mini-panel" title="空气质量" style="width:520px;" showToolbar="false" showCloseButton="false" showFooter="false" showHeader="true">
    <table>
        <tr>
            <td>0-50优（一级）</td>
            <td>绿色</td>
            <td width="100"><div style="width:100px;height:20px;background: #00e400"></div></td>
            <td width="60">#00E400</td>
        </tr>
        <tr>
            <td>50-100良（二级）</td>
            <td>黄色(国标)</td>
            <td><div style="width:100px;height:20px;background: #ffe400"></div></td>
            <td>#FFE400</td>
        </tr>
        <tr>
            <td colspan="4">
                <span class="note">（说明：国标的黄色，在文字为白色时，看不清，因此用下面的黄色代替。实际开发中，除了白色文字时，建议使用上面的国标黄色。）</span>
            </td>
        </tr>
        <tr>
            <td>50-100良（二级）</td>
            <td>黄色(一张图)</td>
            <td><div style="width:100px;height:20px;background: #ccaa22"></div></td>
            <td>#CCAA22</td>
        </tr>
        <tr>
            <td>100-150轻度（三级）</td>
            <td>橙色</td>
            <td><div style="width:100px;height:20px;background: #ff7e00"></div></td>
            <td>#FF7E00</td>
        </tr>
        <tr>
            <td>150-200中度（四级）</td>
            <td>红色</td>
            <td><div style="width:100px;height:20px;background: #ff0000"></div></td>
            <td>#FF0000</td>
        </tr>
        <tr>
            <td>200-300重度（五级）</td>
            <td>紫色</td>
            <td><div style="width:100px;height:20px;background: #99004c"></div></td>
            <td>#99004C</td>
        </tr>
        <tr>
            <td>＞300严重污染（六级）</td>
            <td>褐红色</td>
            <td><div style="width:100px;height:20px;background: #7e0023"></div></td>
            <td>#7E0023</td>
        </tr>
    </table>
</div>
<div class="mini-panel" title="报警颜色" style="width:520px;" showToolbar="false" showCloseButton="false" showFooter="false" showHeader="true">
    <table>
        <tr>
            <td>离线</td>
            <td></td>
            <td width="100"><div style="width:100px;height:20px;background: #8f8f8f"></div></td>
            <td width="100">#8F8F8F</td>
        </tr>
        <tr>
            <td>超标</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #e95959"></div></td>
            <td>#E95959</td>
        </tr>
        <tr>
            <td>预警</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #f26896"></div></td>
            <td>#F26896</td>
        </tr>
        <tr>
            <td>故障</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #e99324"></div></td>
            <td>#E99324</td>
        </tr>
        <tr>
            <td>余额</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #c67171"></div></td>
            <td>#C67171</td>
        </tr>
        <tr>
            <td>(流量)--超排</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #8B2323"></div></td>
            <td>#8B2323</td>
        </tr>
        <tr>
            <td>异常</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #d884d1"></div></td>
            <td>#D884D1</td>
        </tr>
        <tr>
            <td>超量程</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #79aaf5"></div></td>
            <td>#79AAF5</td>
        </tr>
        <tr>
            <td>定值</td>
            <td></td>
            <td><div style="width:100px;height:20px;background: #02bee0"></div></td>
            <td>#02BEE0</td>
        </tr>
    </table>
</div>
<h1>14.文件格式图片</h1>
<img src="${ctx }/trunk/img/frame/style2/file/5-bmp.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-doc.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-docx.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-jpeg.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-jpg.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-pdf.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-png.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-ppt.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-pptx.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-rar.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-xls.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-xlsx.png">
<img src="${ctx }/trunk/img/frame/style2/file/5-zip.png">


<script type="text/javascript">
    mini.parse();
    function changeStyle(style_){
        if(style_==1){
            top.location.href ="${ctx}/trunk/page/frame-top1.jsp";
        }else if(style_==2){
            top.location.href ="${ctx}/trunk/page/frame-top2.jsp";
        }
    }
    /* h1 */

    /* h2 */
    function moreSearch(e){
        if($(e).hasClass("bt_moresearch_selected")){
            $(e).removeClass("bt_moresearch_selected");
            //TODO 隐藏更多查询条件
        }else{
            $(e).addClass("bt_moresearch_selected");
            //TODO 显示更多查询条件
        }
    }

    /* h3 */
    var now=new Date();
    mini.get("query_endTime").setValue(mini.formatDate (now, "yyyy-MM-dd 23:59:59"));
    mini.get("query_date").setValue(now);
    now.setMonth(now.getMonth()-1);
    mini.get("query_bgTime").setValue(mini.formatDate (now, "yyyy-MM-dd 00:00:00"));

    function onDateTimeValidation(e) {
        if (e.isValid) {
            if (mini.get("query_bgTime").getValue()>mini.get("query_endTime").getValue()) {
                e.errorText = "开始时间不能大于结束时间";
                e.isValid = false;
            }
        }
    }

    var datagrid=	mini.get("datagrid");
    datagrid.load({testName:'为了演示无数据效果，故意查询空结果集'});
    //列菜单-排序、隐藏列
    var menu = new ColumnsMenu(datagrid);
    //锁定列
    function lockColumn(){
        $("#bt_lock_column").hide();
        $("#bt_unlock_column").show();
        datagrid.frozenColumns(0,3);
    }
    function unlockColumn(){
        $("#bt_lock_column").show();
        $("#bt_unlock_column").hide();
        datagrid.unFrozenColumns();
    }

    //设置换行
    function warpCell(){
        $("#bt_warp_cell").hide();
        $("#bt_nowarp_cell").show();
        datagrid.getColumn("field3").allowCellWrap=true;
        query();
    }
    function noWarpCell(){
        $("#bt_warp_cell").show();
        $("#bt_nowarp_cell").hide();
        datagrid.getColumn("field3").allowCellWrap=false;
        query();
    }

    var queryForm=new mini.Form("queryForm");
    query();
    function query(){
        if(queryForm.validate()){
            //TEST
            setTimeout(function(){
                datagrid.setData([{field3:"测试换行，测试换行。"},{field3:0},{field3:1},{field3:2},{field3:3},{field3:4},{field3:5},{field3:6},{field3:7},{field3:8},{field3:9},{field3:10},{field3:11},{field3:12},{field3:13},{field3:14},{field3:15}]);
            }, 500);
            //TODO
        }
    }
    datagrid.on("drawcell",function(e){
        var sender=e.sender,record=e.record,field=e.field,value=e.value;
        if(field=="field11"){
            if(record.field3==0){
                e.cellHtml+="<div class='bt_grid_state' style='background-color:#E4E4F4;color:#456DE9;'>已巡检</div>";
            }else if(record.field3==1){
                e.cellHtml+="<div class='bt_grid_state' style='background-color:#F9E6E6;color:#E77575;'>未巡检</div>";
            }
        }
        if(field=="op"){
            if(record.field3==0){
                e.cellHtml="<div class='bt_grid_default'>查看</div>";
                e.cellHtml+="<div class='bt_grid_default'>编辑</div>";
                e.cellHtml+="<div class='bt_grid_default bt_grid_default_last'>删除</div>";
            }else if(record.field3==1){
                e.cellHtml="<div class='bt_grid bt_grid_issue'>下发</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_delete'>删除</div>";
            }else if(record.field3==2){
                e.cellHtml="<div class='bt_grid bt_grid_query'>查看</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_do'>办理</div>";
            }else if(record.field3==3){
                e.cellHtml="<div class='bt_grid bt_grid_view'>预览</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_download'>下载</div>";
            }else if(record.field3==4){
                e.cellHtml="<div class='bt_grid bt_grid_edit'>编辑</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_apply'>申报</div>";
            }else if(record.field3==5){
                e.cellHtml="<div class='bt_grid bt_grid_cancel'>取消</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_save'>保存</div>";
            }else if(record.field3==6){
                e.cellHtml="<div class='bt_grid bt_grid_hide'>隐藏</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_show'>显示</div>";
            }else if(record.field3==7){
                e.cellHtml="<div class='bt_grid bt_grid_manage'>管理</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_recovery'>恢复</div>";
            }else if(record.field3==8){
                e.cellHtml="<div class='bt_grid bt_grid_use'>启用</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_unuse'>禁用</div>";
            }else if(record.field3==9){
                e.cellHtml="<div class='bt_grid bt_grid_back'>退回</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_delay'>推迟</div>";
            }else if(record.field3==10){
                e.cellHtml="<div class='bt_grid bt_grid_change'>转办</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_audit'>审核</div>";
            }else if(record.field3==11){
                e.cellHtml="<div class='bt_grid bt_grid_print'>打印</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_assign'>分配</div>";
            }else if(record.field3==12){
                e.cellHtml="<div class='bt_grid bt_grid_follow'>跟进</div>";
            }else if(record.field3==13){
                e.cellHtml="<div class='bt_grid bt_grid_pass'>通过</div>";
                e.cellHtml+="<div class='bt_grid bt_grid_fail'>不通过</div>";
            }else if(record.field3==14){
                e.cellHtml="<div class='bt_grid bt_grid_detail'>查看详情</div>";
            }else if(record.field3==15){
                e.cellHtml+="<div class='bt_grid bt_grid_password'>修改密码</div>";
            }else{
                e.cellHtml+="<div class='bt_grid_default_disable bt_grid_default_last'>审核</div>";
            }
        }
    });

    /* h4 */
    var win=mini.get("win");
    function openWin(){
        win.setTitle("标题");
        win.showAtPos("center","middle");
    }
    var win2=mini.get("win2");
    function openWin2(){
        win2.showAtPos("center","middle");
    }

    var winDataForm=new mini.Form("winDataForm");
    function saveWin(){
        if(winDataForm.validate()){
            winDataForm.loading("加载中（演示）...");
            //TODO 保存数据,以下方法应该在ajax回调函数中.setTimeout为了演示，实际开发过程不需要。
            setTimeout(function() {
                winDataForm.unmask();
                showAlertAutoHide('保存成功！','success');
                win.hide();
                //TODO 重新加载数据
            }, 1000);
        }
    }

    /* h5 */
    var dataForm=new mini.Form("dataForm");
    //TEST
    dataForm.setData({"combobox1":"1"});

    labelModel(dataForm);
    function edit(){
        $("#bt_edit").hide();
        $("#bt_delete").hide();
        $("#bt_save").show();
        $("#bt_cancel").show();
        inputModel(dataForm);
    }
    function save(){
        if(dataForm.validate()){
            dataForm.loading();
            //TODO 保存数据,以下方法应该在ajax回调函数中
            console.log(dataForm.getData());
            $("#bt_edit").show();
            $("#bt_delete").show();
            $("#bt_save").hide();
            $("#bt_cancel").hide();
            labelModel(dataForm);
            dataForm.unmask();
            showAlertAutoHide('保存成功！','success');
            //TODO 重新加载数据
        }
    }

    function cancel(){
        $("#bt_edit").show();
        $("#bt_delete").show();
        $("#bt_save").hide();
        $("#bt_cancel").hide();
        labelModel(dataForm);
    }
    function remove(){
        showConfirm("确定删除记录？","确定","question",
            //点击确定后的回调函数
            function(){
                showAlert("删除成功!","success",'提示');
                //TODO 如果删除不关闭当前页面，则重新加载数据
                $("#bt_edit").show();
                $("#bt_delete").show();
                $("#bt_save").hide();
                $("#bt_cancel").hide();
                //TODO 如果删除直接关闭当前页面，则刷新外面的表格
            });
    }

    /* h6 */
    function showConfirmDeleteTest(){
        /**
         * 确认框。
         * 参数：message-确认内容，
         * 		title-确认标题，必传参数。为空或null时，无标题栏。
         * 		iconCls-图标样式（question-问号，warn-警告，success-操作成功，error-错误，info-描述，select-选中，download-下载）。
         * 		callback-点击确定时的回调函数。
         */
        showConfirm("确定删除记录？","","question",
            function(){
                //TODO 删除
                showAlertAutoHide('删除成功！','success');//默认2000毫秒
            }
        );
    }

    function showConfirmDownloadTest(){
        showConfirm("执行下载操作！","","download",
            function(){
                showLoading("下载中...");
                //TODO 下载

                //TEST,此处为示例，采用setTimeout演示效果，实际编码时在下载事件结束后调用。
                setTimeout(function() {
                    stopLoading();
                    showAlert("下载成功!","success",'');
                }, 3000);
            }
        );
    }

    function showInputTest(){
        /**
         * 输入框。
         * 参数：message-提示内容，
         * 		title-标题，必须有标题。
         * 		callback-点击确定时的回调函数，返回输入内容。
         * 		multi-true为多行文本框，false为单行文本框
         */
        showInput("请输入订单号：","输入",function(e){
            //TODO
            showInfoTip("输入内容："+e);
        },false);
    }

    function showLoadingTest(){
        /**
         * 加载框（小）showLoading(message)。
         * 参数：message-提示内容，可为空，为空默认显示"加载中"。
         */
        showLoading();

        //TEST,此处为示例，采用setTimeout演示效果，实际编码时在事件结束后调用。
        setTimeout(function() {
            // 关闭加载框（小）。
            stopLoading();
        }, 3000);
    }

    function showWaitingTest(){
        /**
         * 等待框（大）showWaiting(message,title)。
         *  参数：message-提示内容，可为空，为空默认显示"加载中,,请稍后..."。
         *  		  title-提示标题，可为空，为空默认显示"加载中"。
         */
        var waitingId=showWaiting();

        //TEST,此处为示例，采用setTimeout演示效果，实际编码时在事件结束后调用。
        setTimeout(function(){
            /**
             * 关闭等待框（大）。
             *  参数：waitingId-生成等待框时返回的ID
             */
            stopWaiting(waitingId);
        }, 3000);
    }

    /* h7 */
    var listbox1 = mini.get("list1");
    var listbox2 = mini.get("list2");

    queryLeftList();
    function queryLeftList(){
        //通常左侧列表数据集合为过滤了右侧列表的差集
        //TEST
        listbox1.load({testName:'为了演示无数据效果，故意查询空结果集'});
        setTimeout(function() {
            listbox1.setData([{field1:'选项一'},{field1:'选项二'},{field1:'选项三'},{field1:'选项四'},{field1:'选项五'},{field1:'选项六'},{field1:'选项七'},{field1:'选项八'},{field1:'选项九'},{field1:'选项十'}]);
        }, 300);
    }

    listbox2.load({testName:'为了演示无数据效果，故意查询空结果集'});
    $("#rightCounts").html(listbox2.data.length);

    function addList(){
        $("#bt_add_list").addClass("bt_move_right_selected");
        $("#bt_remove_list").removeClass("bt_move_left_selected");
        var rows=listbox1.getSelecteds();
        if(rows.length>0){
            listbox1.removeRows(rows);
            listbox2.addRows(rows);
            $("#rightCounts").html(listbox2.data.length);
        }else{
            showAlert('请先选中左侧</br>移入记录！','select','提示');
        }
    }
    function removeList(){
        $("#bt_add_list").removeClass("bt_move_right_selected");
        $("#bt_remove_list").addClass("bt_move_left_selected");
        var rows=listbox2.getSelecteds();
        if(rows.length>0){
            listbox2.removeRows(rows);
            listbox1.addRows(rows);
            $("#rightCounts").html(listbox2.data.length);
        }else{
            showAlert('请先选中右侧</br>移除记录！','select','提示');
        }
    }
    function saveLeftList(){
        console.log(listbox2.data);
        //TODO 保存右侧列表数据，通常不需要区分新增、删除数据，直接全部删除后再增加新数据。
        showAlertAutoHide('保存成功！','success');
    }


    /**树左移右移**/

    var treegrid1 = mini.get("treegrid1");
    var treegrid2 = mini.get("treegrid2");

    //treegrid不支持换行，因此需要特殊处理：超出部分省略号显示，鼠标移入显示全部内容。
    function drawcell(e){
        var node = e.node, column = e.column,field = e.field,value = e.value;
        if (field == "field1") {
            //max-width需要根据实际页面情况自行设置
            e.cellHtml="<div title='"+node.field1+"' style='text-overflow:ellipsis;overflow: hidden;max-width:400px;'>"+node.field1+"</div>";
        }
    }
    //加载数据
    queryLeftTreeGrid();
    function queryLeftTreeGrid(){
        //通常左侧列表数据集合为过滤了右侧列表的差集
        //TEST
        treegrid1.loadList([{id:'1',field1:'南通市',pid:''},{id:'2',field1:'开发区',pid:'1'},{id:'3',field1:'崇川区',pid:'1'},{id:'4',field1:'企业1',pid:'2'},{id:'5',field1:'企业2',pid:'2'},{id:'6',field1:'企业3',pid:'3'},{id:'7',field1:'企业4',pid:'3'}]);

        drawEmptyTreeGrid("treegrid1");
        drawEmptyTreeGrid("treegrid2");
    }

    getRightSize();
    //右侧树已选数量统计
    function getRightSize(){
        var size_=0;
        var nodes=treegrid2.getAllChildNodes(treegrid2.getRootNode());
        for(var i=0;i<nodes.length;i++){
            //此处只统计子节点数量，如果业务有特殊逻辑（如根据节点数据类型统计，如企业或人员等），可修改此处。
            if(treegrid2.isLeaf(nodes[i])){
                size_++;
            }
        }
        $("#rightTreeCounts").html(size_);
    }
    //treegrid不支持emptyText，因此需要特殊处理
    function drawEmptyTreeGrid(treegrid_id){
        //渲染无数据图片
        if(mini.get(treegrid_id).getList().length==0){
            if($("#"+treegrid_id).find(".mini-grid-rows-view").find(".no-company").length==0){
                $("#"+treegrid_id).find(".mini-grid-rows-view").append('<div class="no-company" style="margin-left: calc(50% - 50px);margin-top: calc(50% - 120px);"><span class="no-data-title">暂未选择企业</span></div>');
            }
        }else{
            //有数据时，移除图片
            $("#"+treegrid_id).find(".mini-grid-rows-view").find(".no-company").remove();
        }
        //重新渲染treegrid，防止出现布局异常
        mini.get(treegrid_id).doLayout();
    }
    //左移
    function addTreeGrid(){
        $("#bt_add_treelist").addClass("bt_move_right_selected");
        $("#bt_remove_treelist").removeClass("bt_move_left_selected");
        //所有选中的子节点及其父节点
        var selectNodes=treegrid1.getCheckedNodes(true);
        //所有选中的子节点，不包括父节点
        var selectChildNodes=treegrid1.getCheckedNodes(false);
        if(selectChildNodes.length>0){
            //左侧树移除所有子节点
            treegrid1.removeNodes(selectChildNodes);
            //右侧树数据源
            var rightData=treegrid2.getList();
            //遍历左侧树所有选中的子节点及父节点
            for(var i=0;i<selectNodes.length;i++){
                var node=selectNodes[i];
                //当前节点是否为子节点
                if(treegrid1.isLeaf(node)){
                    //因为上面已经删除了所有子节点，因此，如果原来的父节点下所有子节点都被删除，则原父节点会变成子节点，继续删除该父节点。
                    treegrid1.removeNode(node);
                    //当前节点删除后，上级父节点如果也变成了子节点，继续删除。此处只考虑3级结构，如果超过3级，需要继续删除（可考虑使用递归）
                    if(treegrid1.isLeaf(treegrid1.getParentNode(node))){
                        treegrid1.removeNode(treegrid1.getParentNode(node));//如果不需要删除根节点，去掉此处
                    }
                }
                //判断当前节点是否在右侧树中，不在则新增
                if(treegrid2.getNode(node.id)==undefined){
                    //不能直接将node对象加进去，而是生成新的node节点，否则会有BUG！！！此处根据具体业务字段修改！！！
                    rightData.push({id:node.id,field1:node.field1,pid:node.pid});
                }
            }
            //加载右侧树
            treegrid2.loadList (rightData);
            //计算已选数量
            getRightSize();
            //重新渲染树无数据图片
            drawEmptyTreeGrid("treegrid1");
            drawEmptyTreeGrid("treegrid2");
        }else{
            showAlert('请先选中左侧</br>移入记录！','select','提示');
        }
    }
    //右移
    function removeTreeGrid(){
        $("#bt_add_treelist").removeClass("bt_move_right_selected");
        $("#bt_remove_treelist").addClass("bt_move_left_selected");
        //所有选中的子节点及其父节点
        var selectNodes=treegrid2.getCheckedNodes(true);
        //所有选中的子节点，不包括父节点
        var selectChildNodes=treegrid2.getCheckedNodes(false);
        if(selectChildNodes.length>0){
            //右侧树移除所有子节点
            treegrid2.removeNodes(selectChildNodes);
            //左侧树数据源
            var leftData=treegrid1.getList();
            //遍历右侧树所有选中的子节点及父节点
            for(var i=0;i<selectNodes.length;i++){
                var node=selectNodes[i];
                //当前节点是否为子节点
                if(treegrid2.isLeaf(node)){
                    //因为上面已经删除了所有子节点，因此，如果原来的父节点下所有子节点都被删除，则原父节点会变成子节点，继续删除该父节点。
                    treegrid2.removeNode(node);
                    //当前节点删除后，上级父节点如果也变成了子节点，继续删除。此处只考虑3级结构，如果超过3级，需要继续删除（可考虑使用递归）
                    if(treegrid2.isLeaf(treegrid2.getParentNode(node))){
                        treegrid2.removeNode(treegrid2.getParentNode(node));//如果不需要删除根节点，去掉此处
                    }
                }
                //判断当前节点是否在左侧树中，不在则新增
                if(treegrid1.getNode(node.id)==undefined){
                    //不能直接将node对象加进去，而是生成新的node节点，否则会有BUG！！！此处根据具体业务字段修改！！！
                    leftData.push({id:node.id,field1:node.field1,pid:node.pid});
                }
            }
            //加载左侧树
            treegrid1.loadList (leftData);
            //计算已选数量
            getRightSize();
            //重新渲染树无数据图片
            drawEmptyTreeGrid("treegrid1");
            drawEmptyTreeGrid("treegrid2");
        }else{
            showAlert('请先选中右侧</br>移除记录！','select','提示');
        }
    }
    function saveLeftTreeList(){
        console.log("所有数据",treegrid2.getList());
        var result=[];
        var nodes=treegrid2.getAllChildNodes(treegrid2.getRootNode());
        for(var i=0;i<nodes.length;i++){
            //此处只统计子节点数量，如果业务有特殊逻辑（如根据节点数据类型统计，如企业或人员等），可修改此处。
            if(treegrid2.isLeaf(nodes[i])){
                result.push(nodes[i]);
            }
        }
        console.log("子节点数据",result);
        //TODO 保存右侧列表数据，通常不需要区分新增、删除数据，直接全部删除后再增加新数据。
        showAlertAutoHide('保存成功！','success');
    }




    /* h8 */
    var tree1=mini.get("tree1");
    var tree2=mini.get("tree2");
    //TEST 2个树共用一个数据源（同一个数组变量或其引用或其拷贝）会出现BUG！！！
    var treeData1=[{id:"100",text:"根节点",pid:""},
        {id:"110",text:"父节点1",pid:"100"},
        {id:"111",text:"子节点1-1",pid:"110"},
        {id:"112",text:"子节点1-2",pid:"110"},
        {id:"113",text:"子节点1-3",pid:"110"},
        {id:"120",text:"父节点2",pid:"100"},
        {id:"121",text:"子节点2-1",pid:"120"},
        {id:"122",text:"子节点2-2",pid:"120"},
        {id:"123",text:"子节点2-3",pid:"120"},
        {id:"124",text:"子节点2-4",pid:"120"},
        {id:"130",text:"父节点3",pid:"100"},
        {id:"131",text:"子节点3-1",pid:"130"},
        {id:"132",text:"子节点3-2",pid:"130"},
        {id:"133",text:"子节点3-3",pid:"130"},
        {id:"134",text:"子节点3-4",pid:"130"},
        {id:"140",text:"父节点4",pid:"100"}];
    tree1.loadList(treeData1);
    var treeData2=[{id:"100",text:"根节点",pid:""},
        {id:"110",text:"父节点1",pid:"100"},
        {id:"111",text:"子节点1-1",pid:"110"},
        {id:"112",text:"子节点1-2",pid:"110"},
        {id:"113",text:"子节点1-3",pid:"110"},
        {id:"120",text:"父节点2",pid:"100"},
        {id:"121",text:"子节点2-1",pid:"120"},
        {id:"122",text:"子节点2-2",pid:"120"},
        {id:"123",text:"子节点2-3",pid:"120"},
        {id:"124",text:"子节点2-4",pid:"120"},
        {id:"130",text:"父节点3",pid:"100"},
        {id:"131",text:"子节点3-1",pid:"130"},
        {id:"132",text:"子节点3-2",pid:"130"},
        {id:"133",text:"子节点3-3",pid:"130"},
        {id:"134",text:"子节点3-4",pid:"130"},
        {id:"140",text:"父节点4",pid:"100"}];
    //treeData2=JSON.parse(JSON.stringify(treeData1)); //即使是深拷贝，也会有问题！原因不明！
    tree2.loadList(treeData2);

    //树 重绘节点
    function onTreeDrawNode(e) {
        var node = e.node;
        //树根节点文字加粗（此样式通过css较难实现，因此使用JS实现）
        if (e.node._level == 0) {
            e.nodeStyle = 'font-weight:bold;';
        }
    }



    /* h10 */
    var win_buttonedit_grid=mini.get("win_buttonedit_grid");
    var datagrid_buttonedit=mini.get("datagrid_buttonedit");
    //TEST
    datagrid_buttonedit.setData([{field1:'选项一'},{field1:'选项二'},{field1:'选项三'},{field1:'选项四'},{field1:'选项五'},{field1:'选项六'},{field1:'选项七'},{field1:'选项八'},{field1:'选项九'},{field1:'选项十'}]);

    function onButtonEditGrid(){
        win_buttonedit_grid.showAtPos("center","middle");
    }

    function selectGrid(){
        var row=datagrid_buttonedit.getSelected();
        if(row){
            mini.get("buttonedit_grid").setValue(row.field1);
            mini.get("buttonedit_grid").setText(row.field1);
            win_buttonedit_grid.hide();
        }else{
            showAlert("请先选择一条记录！","select",'提示');
        }

    }

    /* h11 */
    var win_buttonedit_tree=mini.get("win_buttonedit_tree");
    var tree_buttonedit=mini.get("tree_buttonedit");
    //TEST
    tree_buttonedit.loadList([{id:"100",text:"根节点",pid:""},
        {id:"110",text:"父节点1",pid:"100"},
        {id:"111",text:"子节点1-1",pid:"110"},
        {id:"112",text:"子节点1-2",pid:"110"},
        {id:"113",text:"子节点1-3",pid:"110"},
        {id:"120",text:"父节点2",pid:"100"},
        {id:"121",text:"子节点2-1",pid:"120"},
        {id:"122",text:"子节点2-2",pid:"120"},
        {id:"123",text:"子节点2-3",pid:"120"},
        {id:"124",text:"子节点2-4",pid:"120"},
        {id:"130",text:"父节点3",pid:"100"},
        {id:"131",text:"子节点3-1",pid:"130"},
        {id:"132",text:"子节点3-2",pid:"130"},
        {id:"133",text:"子节点3-3",pid:"130"},
        {id:"134",text:"子节点3-4",pid:"130"},
        {id:"140",text:"父节点4",pid:"100"}]);

    function onButtonEditTree(){
        win_buttonedit_tree.showAtPos("center","middle");
    }

    function selectTree(){
        var nodes=tree_buttonedit.getCheckedNodes(false);//true包含父节点，false不包含父节点。看具体业务。
        if(nodes.length>0){
            var ids_="",texts_="";
            for(var i=0;i<nodes.length;i++){
                ids_+=nodes[i].id+",";
                texts_+=nodes[i].text+",";
            }
            ids_=ids_.substr(0,ids_.length-1);
            texts_=texts_.substr(0,texts_.length-1);
            mini.get("buttonedit_tree").setValue(ids_);
            mini.get("buttonedit_tree").setText(texts_);
            win_buttonedit_tree.hide();
        }else{
            showAlert("请先选择一条记录！","select",'提示');
        }
    }

    function checkTel(e){
        if (e.isValid) {
            if (isTel(e.value) == false) {
                e.errorText = "必须输入手机号或固定电话";
                e.isValid = false;
            }
        }
    }
    function isTel(v) {
        var re = new RegExp("^(((\\+\\d{2}-)?0\\d{2,3}-\\d{7,8})|((\\+\\d{2}-)?(\\d{2,3}-)?([1][3,4,5,7,8][0-9]\\d{8})))$");
        if (re.test(v)) return true;
        return false;
    }

</script>
</body>
</html>